<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./header.css" rel="stylesheet">
    </link>
    <link href="./nav.css" rel="stylesheet">
    </link>
    <link href="./header-banner.css" rel="stylesheet">
    </link>
    <link href="./index.css" rel="stylesheet">
    </link>
</head>

<body>
    <!-- 头部右侧导航条和查询框 -->
    <template id="header-right">
        <div class="header-right">
            <ul class="header-right">
                <li v-for="item in arr">{{item}}</li>
            </ul>
            <div class="inputs">
                <input>
                <span>查询</span>
            </div>
        </div>
    </template>
    <!-- 头部的头部，logo和右边 -->
    <template id="header-top">
        <header class="header-top">
            <img src="https://www.forerunnercollege.com/so/static/img/logo.7d1b3df0.png">
            <header-right></header-right>
        </header>
    </template>
    <!-- 头部导航条，二级菜单 -->
    <template id="sub-nav">
        <ul class="sub-nav">
            <li v-for="item in listData" class="menu2">
                <a>{{item.title}}</a>
            </li>
        </ul>
    </template>

    <!-- 头部导航条 -->
    <template id="header-nav">
        <nav class="header-nav">
            <ul class="container menu-box">
                <li v-for="item in listData" class="menu1">
                    <a>{{item.title}}</a>
                    <sub-nav v-if="item.subList != null" :list-data="item.subList"></sub-nav>
                </li>
            </ul>
        </nav>
    </template>

    <template id="header-banner">
        <figure class="header-banner-box">
            <ul class="header-banner-view" :style="'width: ' + listData.length * 1400 + 'px'">
                <li class="header-banner-item" v-for="item in listData" :style="'background-image: url(' + item + ')'">
                </li>
            </ul>
        </figure>
    </template>

    <!-- 头部 -->
    <template id="public-header">
        <header>
            <header-top></header-top>
            <header-nav></header-nav>
            <header-banner></header-banner>
        </header>
    </template>

    <!-- 中间开始 -->
    <template id="plant-header">
        <header class="plant-header">
            <ul class="plant-header-nav">
                <li v-for="(item,idx) in listData" :class="value == idx ? 'active' : '' ">
                    <a @click="$emit('input',idx)">{{item}}</a>
                </li>
            </ul>
            <a class="read-more">阅读更多</a>
        </header>
    </template>

    <template id="plant1-swiper">
        <figure class="plant1-swiper-box">
            <ul class="plant1-swiper-view" :style="'transform: translate(' + transform + 'px);'">
                <li v-for="item in images" :style="'background-image: url(' + item + ')'">
                </li>
            </ul>
        </figure>
    </template>

    <template id="plant1-list">
        <ul class="plant1-list">
            <li v-for="item in listData">
                <a :title="item">{{item}}</a>
                <span>2022-12-12</span>
            </li>
        </ul>
    </template>

    <template id="index-plant1">
        <section class="plant1-box">
            <plant-header v-model="index" :list-data="headerList"></plant-header>
            <div class="plant1-content-box">
                <plant1-swiper :images="listData[index].images"></plant1-swiper>
                <plant1-list :list-data="listData[index].listData"></plant1-list>
            </div>
        </section>
    </template>

    <template id="index-plant2">
        <aside class="plant2-box">
            <plant-header v-model="index" :list-data="headerList"></plant-header>
            <ul class="plant2-content-box">
                <li v-for="item in listData" class="plant2-list-item">
                    <aside>
                        <p>{{item.publish_time.substring(8,10)}}</p>
                        <p>{{item.publish_time.substring(0,7)}}</p>
                    </aside>
                    <hgroup>
                        <h3>
                            <a>{{item.title}}</a>
                        </h3>
                        <h4>
                            {{item.title}}
                        </h4>
                    </hgroup>
                </li>
            </ul>
        </section>
    </template>

    <main id="app">
        <public-header></public-header>
        <div class="center-box">
            <div class="center-row1">
                <index-plant1></index-plant1>
                <index-plant2></index-plant2>
            </div>
        </div>
    </main>
</body>
<script src="../vue.js"></script>
<script src="./header-components.js"></script>
<script src="./index-components.js"></script>
<script>
    new Vue({
        el: "#app"
    })
</script>

</html>